import React, { useState, useEffect, useCallback } from 'react'
import { getSysUserSelected } from '../../../../../../Api/listUrl'
import { Button, Form, Col, Row, Input, Select, message } from 'antd'

const { Option } = Select;

const SelectModule = ({listFun, handleSelect}) => {
    const [form] = Form.useForm()
    const {resetFields, validateFields} = form
    const [userList, setUserList] = useState([])
    //用户下拉
    const userFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysUserSelected()
                if (code === '20000') {
                    setUserList(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        userFun()
    }, [userFun])

    const handleReset = () => {
        listFun()
        resetFields()
    }
    const onFinish = () => {
        validateFields().then(values => {
            handleSelect(values)
        })
    }

    return <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        form={form}
    >
        <Row>
            <Col span={8}>
                <Form.Item label="业务流水号" placeholder="请输入业务流水号" name="serialNo">
                    <Input />
                </Form.Item>
            </Col>
            <Col span={8}>
                <Form.Item name="applicant" label="申请人" hasFeedback>
                    <Select placeholder="请选择申请人">
                        {
                            userList.map(item => {
                                return <Option key={item.id} value={item.id}>
                                    {item.name}
                                </Option>
                            })
                        }
                    </Select>
                </Form.Item>
            </Col>
        </Row>
        <Row>
            <Col span={20}></Col>
            <Col span={4}>
                <Form.Item {...tailLayout}>
                    <Button onClick={handleReset}>重置</Button>
                    <Button type="primary" htmlType="submit">
                        确定
                    </Button>
                </Form.Item>
            </Col>
        </Row>
    </Form>
}

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

export default SelectModule